<template>
	<view>
		<ttBar title="换绑手机号" leftIcon="icon-back" rightIcon=""></ttBar>
		<view class="bindStatus">
			<view class="stepText">
				<text>验证原手机号</text>
				<text>绑定新手机号</text>
			</view>
			<view class="stepBox">
				<text class="active">1</text>
				<view class="line">
				</view>
				<text :class="[checkOld?'active':'']">2</text>
			</view>
		</view>
		<!-- 原手机号 -->
		<view class="inputBox" v-if="!checkOld">
			<view class="row">
				<image src="../../static/phone.png"></image>
				<input type="number" placeholder="请输入原手机号" disabled="true" v-model="oldTel" maxlength="11" />
				<text class="sendBtn" :class="[oldSend?'isSend':'']" v-text="oldText" @tap="getMsgCode"></text>
			</view>
			<view class="row">
				<image src=""></image>
				<input type="number" placeholder="请输入短信验证码" v-model="oldCode" maxlength="6" />
			</view>
			<view class="btnBox">
				<button @tap="nextStep">下一步</button>
			</view>
		</view>
		<!-- 新手机号 -->
		<view class="inputBox" v-if="checkOld">
			<view class="row">
				<image src="../../static/phone.png"></image>
				<input type="number" placeholder="请输入新手机号" v-model="newTel" maxlength="11" />
				<text class="sendBtn" v-text="newText" :class="[newSend?'isSend':'']" @tap="getNewMsgCode"></text>
			</view>
			<view class="row">
				<image src=""></image>
				<input type="number" placeholder="请输入短信验证码" v-model="newCode" maxlength="6" />
			</view>
			<view class="btnBox">
				<button @tap="bindNewTel">绑定</button>
			</view>
		</view>
	</view>
</template>

<script>
	import ttBar from "@/components/ttBar/ttBar.vue";
	import API from "@/common/api.js";
	import {mapState} from "vuex";
	export default {
		components: {
			ttBar
		},
		computed:{
			...mapState({
				userInfo:state=>state.user.userInfo
			})
		},
		data() {
			return {
				checkOld:false,
				oldTel:'',
				oldCode:'',
				oldText:'获取验证码',
				oldSend:false,
				newTel:'',
				newCode:'',
				newText:'获取验证码',
				newSend:false
			};
		},
		methods:{
			nextStep(){
				let rgx = /^1[3456789]\d{9}$/;
				if (!this.oldTel) {
					uni.showToast({
						title: '请输入手机号码',
						icon: 'none'
					});
				} else if (!rgx.test(this.oldTel)) {
					uni.showToast({
						title: '请输入正确的手机号',
						icon: 'none'
					});
				} else if (!this.oldSend) {
					uni.showToast({
						title: '请先获取短信验证码',
						icon: 'none'
					});
				} else if (!this.oldCode) {
					uni.showToast({
						title: '请输入短信验证码',
						icon: 'none'
					});
				} else {
					this.$store.dispatch("checkOldTel",{
						phone:this.oldTel,
						code:this.oldCode
					}).then(()=>{
						this.checkOld=true;
					})
				}
			},
			bindNewTel(){
				let rgx = /^1[3456789]\d{9}$/;
				if (!this.newTel) {
					uni.showToast({
						title: '请输入手机号码',
						icon: 'none'
					});
				} else if (!rgx.test(this.newTel)) {
					uni.showToast({
						title: '请输入正确的手机号',
						icon: 'none'
					});
				} else if (!this.newSend) {
					uni.showToast({
						title: '请先获取短信验证码',
						icon: 'none'
					});
				} else if (!this.newCode) {
					uni.showToast({
						title: '请输入短信验证码',
						icon: 'none'
					});
				} else {
					this.$store.dispatch("bindNewTel",{
						userId:this.userInfo.userId,
						phone:this.newTel,
						code:this.newCode
					}).then(()=>{
						this.userInfo.username=this.newTel
						setTimeout(()=>{
							this.pBack()
						},1500)
					})
				}
			},
			getMsgCode() {
				if (!this.oldSend) {
					let rgx = /^1[3456789]\d{9}$/;
					if (!this.oldTel) {
						uni.showToast({
							title: '请输入手机号码',
							icon: 'none'
						});
					} else if (!rgx.test(this.oldTel)) {
						uni.showToast({
							title: '请输入正确的手机号',
							icon: 'none'
						});
					} else {
						this.$store.dispatch("sendMsgCode",{
							phone:this.oldTel,
							type:'104'
						}).then(res=>{
							if(res.data.code==1){
								this.oldSend = true; //修改状态
								let t = 60;
								this.oldText = t + "秒"
								const itval = setInterval(() => {
									t--;
									if (t < 1) {
										t = 60;
										this.oldText = "获取验证码"
										this.oldSend = false;
										clearInterval(itval);
									} else {
										this.oldSend = true;
										this.oldText = t + "秒"
									}
								}, 1000)
							}
						})
					}
				}else{
					uni.showToast({
						title: '发送的间隔太短啦，请稍后再试',
						icon: 'none'
					});
				}
			
			},
			getNewMsgCode() {
				if (!this.newSend) {
					let rgx = /^1[3456789]\d{9}$/;
					if (!this.oldTel) {
						uni.showToast({
							title: '请输入手机号码',
							icon: 'none'
						});
					} else if (!rgx.test(this.newTel)) {
						uni.showToast({
							title: '请输入正确的手机号',
							icon: 'none'
						});
					} else {
						this.$store.dispatch("sendMsgCode",{
							phone:this.newTel,
							type:'105'
						}).then(res=>{
							if(res.data.code==1){
								this.newSend = true; //修改状态
								let t = 60;
								this.newText = t + "秒"
								const itval = setInterval(() => {
									t--;
									if (t < 1) {
										t = 60;
										this.newText = "获取验证码"
										this.newSend = false;
										clearInterval(itval);
									} else {
										this.newSend = true;
										this.newText = t + "秒"
									}
								}, 1000)
							}
						})
					}
				}else{
					uni.showToast({
						title: '发送的间隔太短啦，请稍后再试',
						icon: 'none'
					});
				}
			
			},
		},
		onLoad() {
			if(this.userInfo.username){
				this.oldTel=this.userInfo.username
			}
		},
		onPullDownRefresh() {
			setTimeout(() => {
				uni.stopPullDownRefresh();
			}, 1500)
		}
	}
</script>

<style lang="less">
	page {
		background-color: #f6f6f6;
	}

	.bindStatus {
		margin: 24upx 26upx 0 26upx;
		background-color: #ffb423;
		border-radius: 20rpx;
		padding: 48upx 0 55upx 0;
		display: flex;
		flex-direction: column;

		.stepText {
			display: flex;

			text {
				flex: 1;
				color: #FFFFFF;
				font-size: 30upx;
				font-weight: bold;
				text-align: center;
			}
		}

		.stepBox {
			margin-top: 22upx;
			display: flex;
			align-items: center;
			justify-content: center;

			text {
				display: inline-block;
				width: 56upx;
				height: 56upx;
				box-sizing: border-box;
				border: 2upx solid #FFFFFF;
				border-radius: 50%;
				text-align: center;
				line-height: 52upx;
				color: #FFFFFF;
			}

			.active {
				background-color: #FFFFFF;
				color: #ffb423;
			}

			.line {
				height: 3upx;
				background-color: #FFFFFF;
				width: 300upx;
			}
		}
	}
	.inputBox {
		display: flex;
		flex-direction: column;
		padding: 0 50upx;
		.row {
			display: flex;
			align-items: center;
			padding-bottom: 32upx;
			padding-top: 58upx;
			border-bottom: 1px solid #e7e7e7;
	
			image{
				width: 22upx;
				height: 38upx;
				margin-right: 20upx;
			}
			input {
				font-size: 32upx;
				flex-shrink: 1;
				flex-grow: 1;
				width: 360upx;
			}
	
			.sendBtn {
				font-size: 28rpx;
				color: #ff7d27;
				flex-shrink: 0;
				flex-grow: 1;
				text-align: right;
			}
			.isSend {
				color: #565866;
			}
		}
	}
	.btnBox{
		margin-top: 76upx;
		padding: 0 40upx;
		button{
			width: 100%;
			height: 88upx;
			border-radius: 44upx;
			background-color: #ffb423;
			color: #FFFFFF;
			font-size: 34upx;
		}
		button:after{
			border: none;
		}
	}
</style>
